<template>
	<div>
		<el-container>
			<el-header >
				<div class="back" @click="back">取消</div>
				<div style="font-size: 24px; color: #565556;">填写题目信息</div>
				<div class="save" @click="save('uFrom')">继续</div>
			</el-header>
			<el-main>
				<div style="width: 900px;margin: 30px auto;">
					<el-form :model="uFrom" :rules="rules" ref="uFrom" label-position="top">
							<el-row :gutter="24">
								<el-col :span="12">
									<el-form-item label="问题 (必填)" prop="wen">
										<textarea v-model="uFrom.wen" maxlength="120" placeholder="不超过120个字" style="height: 100px; width: 98%; border: 1px solid #dcdfe6;border-radius: 4px;" ></textarea>
									</el-form-item>
									<el-form-item label="答案时限">
										<div class="bei"></div>
										<el-select v-model="uFrom.time">
											<el-option v-for="(item,index) in dataList" 
											:key="index" 
											:label="item.time" 
											:value="item.value"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="答案A (必填)" prop="A">
										<el-input style="width: 85%;" 
											v-model="uFrom.A" 
											type="textarea" 
											maxlength="20" 
											placeholder="不超过20个字"></el-input>
											<img class="cuo"
												@click="showbtn1(uFrom.A)" 
												v-show="!uFrom.show1" 
												src="../../assets/img/dui.png" />
											<img class="cuo" 
											 @click="btn1" 
											 v-show="uFrom.show1" 
											 src="../../assets/img/cuo.png" />
									</el-form-item>
									<el-form-item label="答案C">
										<el-input style="width: 85%;"  
											v-model="uFrom.C" 
											type="textarea" 
											maxlength="20" 
											placeholder="不超过20个字"></el-input>
											<img class="cuo"
												@click="showbtn3(uFrom.C)" 
												v-show="!uFrom.show3" 
												src="../../assets/img/dui.png" />
											<img class="cuo" 
											 @click="btn3" 
											 v-show="uFrom.show3" 
											 src="../../assets/img/cuo.png" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="题目图片">
										<el-upload
										  v-model="uFrom.ImgUrl"
										  class="upload-demo"
										  drag
										  @on-change="changURL"
										  @on-success="success"
										  action="https://jsonplaceholder.typicode.com/posts/"
										  multiple>
										  <div class="el-upload__text" style="margin-top: 65px;"><em>点击上传</em> 或 <em>拖拽</em>上传图片</div>
										</el-upload>
									</el-form-item>
									<el-form-item  style="margin-top: 60px;" label="答案B (必填)" prop="B">
										<el-input style="width: 85%;" 
										v-model="uFrom.B" 
										type="textarea" 
										maxlength="20" 
										placeholder="不超过20个字"></el-input>
										<img class="cuo" 
											@click="showbtn2(uFrom.B)" 
											v-show="!uFrom.show2" 
											src="../../assets/img/dui.png" />
										<img class="cuo" 
										 @click="btn2" 
										 v-show="uFrom.show2" 
										 src="../../assets/img/cuo.png" />
									</el-form-item>
									<el-form-item label="答案D">
										<el-input style="width: 85%;" 
											v-model="uFrom.D" 
											type="textarea" 
											maxlength="20" 
											placeholder="不超过20个字"></el-input>
											<img class="cuo"
												@click="showbtn4(uFrom.D)" 
												v-show="!uFrom.show4" 
												src="../../assets/img/dui.png" />
											<img class="cuo" 
											 @click="btn4" 
											 v-show="uFrom.show4" 
											 src="../../assets/img/cuo.png" />
									</el-form-item>
								</el-col>
							</el-row>
					</el-form>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				uFrom:{
					ImgUrl:'',
					time:'',
					wen:'',
					A:'',
					B:'',
					C:'',
					D:'',
					show1:false,
					show2:false,
					show3:false,
					show4:false
				},
				//题目倒计时间
				dataList:[
					{
						time:'5s',value:5
					},
					{
						time:'10s',value:10
					},
					{
						time:'15s',value:15
					},
					{
						time:'20s',value:20
					},
					{
						time:'30s',value:30
					},
					{
						time:'40s',value:40
					},
					{
						time:'50s',value:50
					},
					{
						time:'60s',value:60
					},
					{
						time:'120s',value:120
					}
				],
				a:'',
				b:'',
				c:'',
				d:'',
				rules:{
					wen:[
						{required:true,message:'输入不能为空',trigger:'blur'}
					],
					A:[
						{required:true,message:'输入不能为空',trigger:'blur'}
					],
					B:[
						{required:true,message:'输入不能为空',trigger:'blur'}
					]
				}
			}
		},
		methods:{
			//取消
			back(){
				  this.$confirm('是否放弃已更新内容?', '操作提示', {
					  confirmButtonText: '放弃',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
					  this.$router.go(-1)
					}).catch(() => {
					        
					});
			},
			//继续
			save(uFrom){
				this.$refs[uFrom].validate((valid) => {
					if(valid) {
						 this.$router.push({
						 	path:'/edit',
						 	query:{
						 		ImgUrl:this.uFrom.ImgUrl,
						 		time:this.uFrom.time,
						 		wen:this.uFrom.wen,
						 		A:this.a,
						 		B:this.b,
						 		C:this.c,
						 		D:this.d,
						 		show1:this.uFrom.show1,
						 		show2:this.uFrom.show2,
						 		show3:this.uFrom.show3,
						 		show4:this.uFrom.show4
						 	}
						 })
					} else {
						
					}
				})
				
			},
			changURL(){},
			success(){},
			//选中
			showbtn1(e){
				this.uFrom.show1 = true
				this.a = e
			},
			// 取消选中
			btn1(){
				this.uFrom.show1 = false
			},
			showbtn2(e){
				this.uFrom.show2 = true
				this.b = e
			},
			// 取消选中
			btn2(){
				this.uFrom.show2 = false
			},
			showbtn3(e){
				this.uFrom.show3 = true
				this.c = e
			},
			// 取消选中
			btn3(){
				this.uFrom.show3 = false
			},
			showbtn4(e){
				this.uFrom.show4 = true
				this.d = e
			},
			// 取消选中
			btn4(){
				this.uFrom.show4 = false
			}
		}
	}
</script>

<style>
	.el-select  .el-input__inner {
		 padding-left: 40px;
	}
</style>

<style scoped="scoped" lang="scss">
	.cuo{
		width: 45px;
		height: 45px;
		position: absolute;
		right: 0;
		margin-top: 5px;
	}
	
	.bei{
		height: 21px;
		width: 21px;
		position: absolute;
		margin-left: 13px;
		margin-top: 10px;
		z-index: 100;
		background: url() 0 0/18px 20px no-repeat;
		    // margin-right: 20px;
	}
	
	.el-header{
		position: relative;
		width: 100%;
	    background-color: #ffffff;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		border-bottom: 1px solid #ebebeb;
	  }
	.save{
		 cursor: pointer;
		 width: 100px;
		 height: 40px;
		 margin-top: 8px;
		 line-height: 40px;
		 top: 0;
		 position: absolute;
		 background-color: #2eb1ff;
		 color: #FFFFFF;
		 border-radius: 3px;
		 right: 25px;
	 }
	.back{
		cursor: pointer;
		width: 100px;
		height: 40px;
		margin-top: 8px;
		line-height: 40px;
		position: absolute;
		
		border: 1px solid #d9d9d9;
		border-radius: 3px;
	}
</style>
